<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .msg-box{
            position: fixed;
            top: 0px;
            left: 50%;
            max-width: 50%;
            transform: translate(-50%, 0);
        }
        .msg-box .msg{
            margin-top: 10px;
            background-color: green;
            color: white;
            font-size: 12px;
            padding: 4px 16px;
            border-radius: 6px;
            box-shadow: 0px 0px 8px #ccc;
            transform: translate(0,-100%);
            opacity: 0;
            animation: showMsg 3s ease;
        }
        @keyframes showMsg{
            0%{
                transform: translate(0,-100%);
                opacity: 0;
            }
            10%{
                transform: translate(0,0);
                opacity: 1;
            }
            90%{
                transform: translate(0,0);
                opacity: 1;
            }
            100%{
                transform: translate(0,-100%);
                opacity: 0;
            }
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    
    <input type="button" value="openMsg" onclick="openMsg()">
    <input type="button" value="openMsg" onclick="openMsg('登录成功')">
    <input type="button" value="openMsg" onclick="openMsg('登录失败')">
    <input type="button" value="openMsg" onclick="openMsg('查询成功')">
    <hr>
    <input type="button" value="openMsg" onclick="openTip()">
    <input type="button" value="openMsg" onclick="openTip('登录成功')">
    <input type="button" value="openMsg" onclick="openTip('登录失败')">
    <input type="button" value="openMsg" onclick="openTip('查询成功')">
    <script>

        let tipBox = null;
        function openMsg(msg="默认消息",time=3000){
            // 单例模式
            if(!tipBox){
                tipBox = document.createElement("div");
                tipBox.classList.add("msg-box");
                document.body.appendChild(tipBox);
            }

            let msgDom = document.createElement("div");
            msgDom.classList.add("msg");
            msgDom.style.animationDuration = `${time}ms`;
            msgDom.textContent = msg;
            console.log(msgDom);

            tipBox.appendChild(msgDom);

            setTimeout(()=>{
                tipBox.removeChild(msgDom)
            },time)

        }

        let MsgBox = Vue.extend({
            template:`
                <div class="msg" :style=" 'animation-duration:'+time+'ms' ">{{ msg }}</div>
            `,
            data(){
                return {
                    msg:"默认消息",
                    time:3000
                }
            }
        })

        function openTip(msg="默认消息",time=3000){
            let msgVm = new MsgBox({
                data:{
                    msg:msg,
                    time
                }
            }).$mount()
            // console.log(msgVm.$el)
            if(!tipBox){
                tipBox = document.createElement("div");
                tipBox.classList.add("msg-box");
                document.body.appendChild(tipBox);
            }

            tipBox.appendChild(msgVm.$el);

            setTimeout(()=>{
                tipBox.removeChild(msgVm.$el)
                msgVm.$destroy()
            },3000)
        }


    </script>


    <!-- <div id="app">
        
    </div>

    <script>
        new Vue({
            el:"#app"
            
        })
    </script> -->
</body>
</html>